<template>
    <div>
        <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
        <v-btn height="40px" outlined color="success" @click="newLinkDialog = true">
            添加链接
        </v-btn>
        <v-dialog
            v-model="newLinkDialog"
            overlay-opacity="0.2"
            persistent
            width="600px"
        >
            <div style="width: 600px;background-color: white;">
                <v-form ref="form" style="padding: 20px">
                    <v-container fluid>
                        <v-row>
                            <v-col>
                                <v-text-field
                                        outlined
                                        label="链接"
                                        v-model="link.url"
                                        dense
                                        clearable
                                        autofocus
                                        :rules="[linkUrlRule]"
                                >
                                </v-text-field>
                            </v-col>
                        </v-row>
                        <v-row>
                            <v-col>
                                <v-textarea
                                        v-model="link.description"
                                        outlined
                                        label="描述"
                                        counter
                                        clearable
                                        auto-grow
                                        @keydown.enter="newLink()"
                                        :rules="[linkDescriptionRule]"
                                ></v-textarea>
                            </v-col>
                        </v-row>
                        <v-row>
                            <v-col cols="6">
                                <v-btn block outlined color="primary" @click="newLink()">添加</v-btn>
                            </v-col>
                            <v-col cols="6">
                                <v-btn block outlined color="warning" @click="close()">取消</v-btn>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-form>
            </div>
        </v-dialog>
    </div>
</template>

<script>
    import {linkUrlRule, linkDescriptionRule} from "../../../../util/rule";
    import MyLoadingOverlay from "../../common/MyLoadingOverlay";
    export default {
        name: "MyNewLinkBtn",
        components: {MyLoadingOverlay},
        data() {
            return {
                newLinkDialog: false,
                loadingOverlay: false,
                link: {
                    cid: this.$route.query.cid,
                    url: '',
                    description: ''
                }
            }
        },
        methods: {
            linkUrlRule,
            linkDescriptionRule,
            close() {
                this.newLinkDialog = false;
                this.$refs.form.reset();
            },
            newLink() {
                let _this = this;
                if (!_this.$refs.form.validate()) {
                    return;
                }
                _this.loadingOverlay = true;
                _this._post({
                    url: 'system/collection/new-link',
                    data: _this.link
                }).then(rsp => {
                    if (rsp.data.code === "00000") {
                        _this.$emit("new-link-success")
                        _this.close();
                    } else {
                        _this.$error({message: rsp.data.msg})
                    }
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        }
    }
</script>

<style scoped>

</style>